<%@page import="java.util.Comparator"%>
<%@page import="java.util.Collections"%>
<%@page import="java.util.Collection"%>
<%@page import="java.util.List"%>
<%@page import="java.util.ArrayList"%>
<%@page import="java.util.Map.Entry"%>
<%@page import="java.util.Map"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.HashMap"%>
<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@page import="edu.tsinghua.eea.powermanagement.data.PCDataCell"%>
<%@page
	import="edu.tsinghua.eea.powermanagement.data.PowerConsumptionData"%>
<%@page import="java.util.Vector"%>
<%@page
	import="edu.tsinghua.eea.powermanagementserver.model.DBInterface"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"
	import="edu.tsinghua.eea.powermanagement.data.HomeInfo"%>
<%
	boolean hasData = false;
	PowerConsumptionData pcd = (PowerConsumptionData) request
			.getSession().getAttribute("PCData");
	Date dateSel = (Date)request.getSession().getAttribute("DateSel");
	SimpleDateFormat sdfYMD = new SimpleDateFormat("yyyyMMdd");
	if(pcd != null && pcd.getPCDetail().size() > 0)
		hasData = true;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
</style>
<link href="css/rf_style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/calendarDateInput.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script src="amchart/amcharts/javascript/amcharts.js" type="text/javascript"></script>
<script src="amchart/amcharts/javascript/raphael.js" type="text/javascript"></script>   
<script type="text/javascript">
var chart;
var graph;
var pluggraph;

var chartData = [<%if (hasData) {
				Vector<PCDataCell> vpcd = pcd.getPCDetail();
				for (int i = 0; i < vpcd.size(); i++) {
					Date d = vpcd.get(i).getDate();
					float p = vpcd.get(i).getPower();
					if (i != vpcd.size() - 1) {
						out.println(String
								.format("{year:new Date(%4d,%d,%d,%d,%d,0), value:%.2f, pvalue:0},",
										d.getYear() + 1900, d.getMonth(),
										d.getDate(), d.getHours(),
										d.getMinutes(), p));
					} else {
						out.println(String
								.format("{year:new Date(%4d,%d,%d,%d,%d,0), value:%.2f, pvalue:0}];",
										d.getYear() + 1900, d.getMonth(),
										d.getDate(), d.getHours(),
										d.getMinutes(), p));
					}
				}%>


window.onload = function() {
	chart = new AmCharts.AmSerialChart();
	chart.pathToImages = "amchart/amcharts/javascript/images/";
	chart.marginTop = 15;
	chart.marginLeft = 50;
	chart.marginRight = 20;
	chart.dataProvider = chartData;
	chart.categoryField = "year";

	graph = new AmCharts.AmGraph();
	graph.lineColor = "#CC0000";
	graph.fillColors = "#CC0000";
	graph.negativeLineColor = "#009900";
	graph.negativeFillColors = "#009900";
	graph.fillAlphas = 0.3;
	graph.valueField = "value";
	graph.type = "step";
	chart.addGraph(graph);

	var catAxis = chart.categoryAxis;
	catAxis.parseDates = true;
	catAxis.minPeriod = "mm";
	catAxis.axisColor = "#FFFFFF";
	catAxis.gridColor = "#FFFFFF";
	catAxis.gridAlpha = 0.5;
	catAxis.dashLength = 5;
	catAxis.autoGridCount = true;

	var valAxis = new AmCharts.ValueAxis();
	valAxis.axisColor = "#FFFFFF";
	valAxis.gridColor = "#FFFFFF";
	valAxis.gridAlpha = "0.5";
	valAxis.dashLength = 5;
	chart.addValueAxis(valAxis);

	var chartCursor = new AmCharts.ChartCursor();
	chartCursor.cursorAlpha = 0;
	chartCursor.cursorPosition = "mouse";
	chartCursor.categoryBalloonDateFormat = "YYYY/MM/DD J:NN";
	chart.addChartCursor(chartCursor);

	var chartScrollbar = new AmCharts.ChartScrollbar();
	chartScrollbar.graph = graph;
	chartScrollbar.backgroundAlpha = 0.1;
	chartScrollbar.backgroundColor = "#000000";
	chartScrollbar.scrollbarHeight = 40;

	chartScrollbar.selectedBackgroundColor = "#FFCC32";
	chart.addChartScrollbar(chartScrollbar);

	chart.write("chartdiv");
}

function setType(){
	var newType = getGraphTypeSelection();
	
	if(graph.type != newType){
		graph.type = newType;
		if(pluggraph)
			pluggraph.type = newType;
		chart.validateNow();
	}
}<%}%>
</script>
</head>
<body>
	<div style="background: #FFFFFF;">
		<div id="xsnazzy">
			<b class="xtop"> <b class="xb1"></b><b class="xb2 gray_back"></b><b
				class="xb3 gray_back"></b> <b class="xb4 gray_back"></b><b
				class="xb5 gray_back"></b> </b>
			<div class="xboxcontent">
				<div class="top_title">用电信息查询</div>
				<jsp:include page="server_message.jsp"></jsp:include>
				<div class='fleft inner_title'>全天用电曲线</div>
				<div class=" fleft next_level" style="min-width: 630px;">
					<div>
						<div class="fleft">
						<form id="dateForm" action="dbcon" method="get">
							<input name="action" type="hidden" value="list_item" /> <input
								name="si" type="hidden" value="3" />
							<div class="sim_label fleft">请选择查询日期</div>
							<div class="fleft">
							<%
							if(dateSel == null){
							%>
								<script>DateInput('date', true, 'YYYYMMDD')</script>
							<%} else { %>
								<script>DateInput('date', true, 'YYYYMMDD', <%=sdfYMD.format(dateSel) %>)</script>
							<%} %>
							</div>
							<div class="fleft">
								<input class="submit_btn" type="submit" value="提交" />
							</div>
							<div class="clear"></div>
						</form>
						</div>
						<%
						if(dateSel != null){
							Date nextDate = (Date)dateSel.clone();
							Date prevDate = (Date)dateSel.clone();
							nextDate.setDate(nextDate.getDate() + 1);
							prevDate.setDate(prevDate.getDate() - 1);
						%>
						<div class="fright">
							<a class="btn_style" href="javascript:to_date(<%=sdfYMD.format(prevDate) %>);">
								&lt;前一天
							</a>
							<a class="btn_style" href="javascript:to_date(<%=sdfYMD.format(nextDate) %>);">
								后一天&gt;
							</a>
						</div>
						<%} %>
						<div class="clear"></div>
					</div>
					
					<%
						if (hasData) {
					%>
					<div id="chartdiv"
						style="width: 600px; height: 400px; background-color: #FFCC32;"></div>
					<div class=select_area">
						选择显示方式：
						<input type="radio" name="group" id="rb1" onclick="setType()">折线图
						<input type="radio" name="group" id="rb2" onclick="setType()">平滑曲线图 
						<input type="radio" checked="true" name="group" id="rb3" onclick="setType()">柱状图
					</div>
					<%
						}
					%>
				</div>
				<div class='fleft'>
				<%
					if (pcd != null && pcd.getPlugConsumption().size() > 0) {
						HashMap<String, Double> hmpp = pcd.getPlugConsumption();
						List<Map.Entry<String,Double>> ltpp = new ArrayList<Map.Entry<String,Double>>(hmpp.entrySet());
						SimpleDateFormat sdf = new SimpleDateFormat(
								"yyyy-MM-dd HH:mm:ss");
						Integer detailPerPage = (Integer) session.getAttribute("psize");
						Integer nPage = (Integer) session.getAttribute("page");
						detailPerPage = (detailPerPage == null) ? 10 : detailPerPage;
						nPage = (nPage == null) ? 1 : nPage;
						Integer maxPage = 1 + hmpp.size() / detailPerPage;
						if (hmpp.size() == detailPerPage * (maxPage - 1))
							maxPage -= 1;
						if (nPage > maxPage)
							nPage = maxPage;
				%>
					<div class='fleft'>
						<div style='text-align: right;'>
							<span>一页显示条目数：</span> <a href="dbcon?page=1&psize=10">10</a>&nbsp;
							<a href="dbcon?page=1&psize=20">20</a>&nbsp; <a
								href="dbcon?page=1&psize=30">30</a>
						</div>
						<table class='plug'>
							<tbody>
								<tr class='tab_row1'>
									<td class='normal_border pc_item'>插座编号</td>
									<td class='normal_border pc_power'>当日能耗（kW·h）</td>
									<td class='normal_border pc_power'>能耗比例</td>
								</tr>
								<%
								Collections.sort(ltpp, new Comparator<Map.Entry<String, Double>>(){
									public int compare(Map.Entry<String, Double> o1, Map.Entry<String, Double> o2){
										return (o1.getValue() - o2.getValue() > 0) ? -1 : 1;
									}
								});
								for(int i = (nPage - 1) * detailPerPage; i < ltpp.size()
												&& i < nPage * detailPerPage; i++) {
								%>
								<tr class='tr<%=i % 2%>'>
									<td class='normal_border pc_item' style='text-align: right;' 
									onclick="javascript:show_plug_data(<%=ltpp.get(i).getKey() %>)">
										<%=ltpp.get(i).getKey() %>
									</td>
									<td class='normal_border pc_time'>
										<%=String.format("%.2f", ltpp.get(i).getValue()/1000)%>
									</td>
									<td class='normal_border pc_power'>
										<%if(pcd.getPowerTotal()>0.0){ %>
										<%=String.format("%.2f", ltpp.get(i).getValue() / pcd.getPowerTotal() * 100)%>%
										<%} else { %>
										0.00%
										<%} %>
									</td>
								</tr>
								<%
									}
										if (ltpp.size() == 0) {
								%>
								<tr class='tr0'>
									<td class='normal_border' style='text-align: right;'></td>
									<td class='normal_border'>当日无数据！</td>
									<td class='normal_border'></td>
								</tr>
								<%
									}
								%>
							</tbody>
						</table>
						<div style='text-align: center;'>
							<%
								if (nPage > 1) {
							%>
							<a href="dbcon?page=<%=nPage - 1%>&psize=<%=detailPerPage%>">上一页</a>
							<%
								}
									for (int i = 1; i <= maxPage; i++) {
										if (i == nPage) {
											out.println("<span>[" + i + "]</span>");
										} else if ((i > 1 && i < nPage - 2)
												|| (i > nPage + 2 && i < maxPage)) {
											// do nothing.
										} else {
											out.println("<a href='dbcon?page=" + i + "&psize="
													+ detailPerPage + "'>");
											out.println("[" + i + "]");
											out.println("</a>");
										}
									}
									if (nPage < maxPage) {
										out.println("<a href='dbcon?page=" + (nPage + 1)
												+ "&psize=" + detailPerPage + "'>");
										out.println("下一页");
										out.println("</a>");
									}
							%>
						</div>
					</div>
					<div class='clear'></div>
					<%
						} else if (pcd == null) {
					%>
						错误：无法获取到PowerConsumptionData！
					<%
						} else {
					%>
						暂无用户数据
					<%
						}
					%>
				</div>
				

				<div class='fleft inner_title'>当日用电统计</div>
				<div class='fleft wfill next_level'>
					<%
						if (pcd != null) {
					%>
					本日总用电量为：<%=String.format("%.2f", pcd.getPowerTotal()/1000)%>kW·h
					<%
						} else {
					%>
					错误：无法获取到PowerConsumptionData！
					<%
						}
					%>
				</div>

				<div class='clear'></div>
			</div>
		</div>
		<b class="xbottom"> <b class="xb5"></b><b class="xb5"></b><b
			class="xb4"></b> <b class="xb3"></b><b class="xb2"></b><b class="xb1"></b>
		</b>
	</div>
</body>
</html>